<template>
    <div>
        <h2>欢迎来到用户信息页面</h2>
        <div class="tops">
            <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            <button @click="open">搜索</button>
            <button @click="dialogVisible = true">添加</button>
        </div>
        <el-table :data="tableData" stripe style="width: 90%" border>
            <el-table-column prop="date" label="日期">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, tableData)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="添加" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <el-input v-model="name" placeholder="请输入姓名"></el-input>
            <el-input v-model="address" placeholder="请输入地址"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    mounted(){
        if(this.$store.state.loginstate == 0){
            this.$router.push('/login')
        }
    },
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王发发',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '唐小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王大虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            search: '',
            name:'',
            address:'',
            dialogVisible: false
        }
    }, methods: {
        handleDelete(index, rows) {
            rows.splice(index, 1);
        },
        open() {
            for (let i = 0; i < this.tableData.length; i++) {
                if (this.search == this.tableData[i].name) {
                    this.$message('查询成功！' + this.tableData[i].name + '存在');
                }
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        add(){
            this.dialogVisible = false;
            this.tableData.push({
                date: '2016-05-03',
                name: this.name,
                address: this.address
            })
            this.name='';
            this.address='';
        }
    }
}
</script>

<style scoped lang="scss">
h2 {
    text-align: center;
}

.tops {
    width: 380px;
    margin: auto;

    button {
        width: 60px;
        height: 30px;
        background-color: skyblue;
        border: 0;
        color: white;
        font-size: 20px;
        &:nth-child(2) {
            margin: 10px;
        }
    }
}

.el-table {
    margin: 20px auto;
    font-size: 18px;
}

.el-input {
    width: 220px;
    font-size: 20px;
}
.el-dialog{
    .el-input {
        display: block;
    margin: auto;
}
}
</style>